import { useState } from "react"
import { View, Text, Button } from "@tarojs/components"
import "./daily-hexagram.scss"
import hexagramData from "../../data/hexagram.json"

// 渲染六爻卦象
function renderHexagram(lines) {
  return (
    <View className="hexagram-lines">
      {lines.map((line, index) => (
        <View key={index} className={`hexagram-line ${line ? 'yang' : 'yin'}`}>
          <Text>{line ? '—' : '--'}</Text>
        </View>
      ))}
    </View>
  )
}

export default function DailyHexagram() {
  const [hexagram, setHexagram] = useState(null)
  const [isShaking, setIsShaking] = useState(false)

  const shakeDivination = () => {
    if (isShaking) return

    setIsShaking(true)

    setTimeout(() => {
      const randomIndex = Math.floor(Math.random() * hexagramData.length)
      setHexagram(hexagramData[randomIndex])
      setIsShaking(false)
    }, 2000)
  }

  return (
    <View className="daily-hexagram">
      <View className="container">
        <View className="header">
          <Text className="title">每日一卦</Text>
          <Text className="subtitle">金钱卦占卜</Text>
        </View>

        <View className="divination-area">
          <View className="hexagram-container">
            {hexagram ? (
              <View className="hexagram-result">
                <View className="hexagram-symbol">
                  <View className="hexagram-image">
                    {renderHexagram(hexagram.lines)}
                  </View>
                </View>
                <Text className="hexagram-name">{hexagram.name}</Text>
                <Text className="hexagram-meaning">{hexagram.meaning}</Text>
                <View className="divider"></View>
                <Text className="hexagram-description">{hexagram.description}</Text>
              </View>
            ) : (
              <View className="hexagram-placeholder">
                <Text>摇一摇铜钱，获取今日卦象</Text>
                <View className={`coins-image ${isShaking ? "shaking" : ""}`}>
                  <Text>🪙🪙🪙</Text>
                </View>
              </View>
            )}
          </View>

          <Button 
            className="shake-button" 
            onClick={shakeDivination} 
            disabled={isShaking}
          >
            {isShaking ? "占卜中..." : "摇卦"}
          </Button>
        </View>

        <View className="interpretation-card card">
          <Text className="card-title">卦象解读</Text>
          {hexagram ? (
            <View className="interpretation-content">
              <View className="interpretation-item">
                <Text className="item-title">事业运势</Text>
                <Text className="item-content">
                  今日事业发展{hexagram.id % 2 === 0 ? "顺利，可大胆推进计划" : "有阻碍，宜稳健行事"}
                </Text>
              </View>
              <View className="interpretation-item">
                <Text className="item-title">财富运势</Text>
                <Text className="item-content">财运{hexagram.id % 3 === 0 ? "亨通，可适当投资" : "平平，宜守不宜进"}</Text>
              </View>
              <View className="interpretation-item">
                <Text className="item-title">人际关系</Text>
                <Text className="item-content">
                  人际关系{hexagram.id % 4 === 0 ? "和谐，可拓展人脉" : "有波动，谨慎交往"}
                </Text>
              </View>
            </View>
          ) : (
            <Text className="placeholder-text">请先摇卦获取今日运势</Text>
          )}
        </View>
      </View>
    </View>
  )
}